<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<down-bar :params="params" @search="search" :downBars="downBars"></down-bar>
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		
		<!-- @init="mescrollInit" 这个是否第一次自动触发 -->
		<mescroll-body :ref="'mescrollRef'+i" 
			:down="downOption" 
			@down="downCallback" :up="upOption" @up="upCallback" 
			>
			<view style="padding: 0 30rpx;">
				<course-item v-for="(item, index) in list" :key="index" :item="item">
				</course-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import downBar from './down-bar.vue'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	
	import downBars from '@/config/course-down-bar.js'
	import courseItem from '@/components/common/course-item.vue'
	
	import api from '@/api/course.js'
	
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		
		components: {downBar, courseItem},
		props: {
			params: {
				type:Object,
				default: null
			},
			content: {
				type: String,
				default: ''
			},
			
			i: Number,
			index: {
				type: Number,
				default(){
					return 0
				}
			},
		},
		
		
		
		data(){
			return {
				upOption:{
					auto:false,
					noMoreSize: 4,
				},
				downBars: downBars(), // 注意是调用方法，不要少了()
				
				searchData: {
					content: null,
					sort: null, //排序类型（new 最新，hot热门）
					isFree: null, // 0付费，1免费
					labelId: null, //标签id
					categoryId: null, // 分类id
				},
				
				list: []
			}
		},
		
		mounted() {
			// Object.keys 返回对象中所有的key名称，返回值数组
			this.params && Object.keys(this.searchData).forEach((key)=>{
				// 防止参数值为0也是有效的，所以要将0也正常处理，因为默认0会被false
				this.searchData[key] = 
					( this.params[key] || this.params[key] === 0 ) ? this.params[key] : null
			})
			console.log('mounted合并的searchData', this.searchData)
		},
		
		methods: {
			search(data) {
				// 合并关键字内容，去掉左右空格
				this.searchData.content = this.content && this.content.trim()
				// 合并数据，data中的属性会合并到this.searchData对象属性值上，
				Object.assign(this.searchData, data)
				
				// console.log('查询逻辑', this.searchData)

				// 内容将page.num=1,再upCallback方法
				this.mescroll.resetUpScroll()
			},
			
			// 上拉加载的回调（下拉也会调用此方法，page.num = 1)
			async upCallback(page) {
				console.log('课程列表upCallback', page.num, page.size, this.searchData)
				const {data} = await api.getList(this.searchData, page.num, page.size)
				const currList = data.records
				
				// 第一次加载数据（下拉刷新）
				if(page.num === 1) {
					this.list = []
					// 回到顶部(距离顶部位置，时长毫秒数)
					this.mescroll.scrollTo(0, 0)
				}
				
				this.list = this.list.concat(currList)
				// console.log('list', this.list)
				// 请求成功，隐藏加载状态
				this.mescroll.endBySize(currList.length, data.total)
			},
			
			
		}
	}
</script>
<style>
</style>
